<%@ page contentType="text/html; charset=utf-8"%>
<%@ include file="../../header.jsp"%>
<link rel="stylesheet" type="text/css" href="${ctx }/bootstrap/css/bootstrap-datetimepicker.css">
<script src="${ctx}/chart/echarts.common.min.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctx }/bootstrap/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctx }/bootstrap/js/bootstrap-datetimepicker.fr.js"></script>
<meta charset="UTF-8" />
<style>

</style>
<div class="container">
	<div class="panel panel-info">
    <div class="panel-body">
		<form class="form-inline" role="form">
   <div class="form-group">
      <label class="sr-only" for="name">名称</label>
      <input type="text" class="form-control" name="showtime" readonly 
							 id="starttimepicker" placeholder="开始时间" data-date-format="yyyy-mm-dd">
   </div>
   <div class="form-group">
      <label class="sr-only" for="name">名称</label>
      <input type="text" class="form-control" name="showtime" readonly 
							 id="endtimepicker" placeholder="结束时间" data-date-format="yyyy-mm-dd">
   </div>
   <button type="button" class="btn btn-default">查 询</button>
</form>
   </div>
</div>
<div class="panel panel-info">
    <div class="panel-body">
		<div id="main" style="width: 100%;height:400px;"></div>
   </div>
</div>
</div>
<script>
var xdata = null;
var ydata = null; 
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();

myChart.setOption({
	title: {
        text: '登录统计'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
    	 data:['登录统计']
    },
    xAxis: {
        data: []
    },
    yAxis: {
    },
    series: [
        {
            name:'当天登录人数',
            type:'line',
            stack: '总量',
            data:[]
        }
    ]
});
$(function(){
	$(".mkbanner >li:eq(9)").addClass("active");
	$('#starttimepicker').datetimepicker({
		format: 'yyyy-mm-dd',
		autoclose: true,
	    todayBtn: true,
	    pickerPosition: "bottom-left",
         weekStart: 1,  
         autoclose: true,  
         startView: 2,  
         minView: 2,  
         forceParse: false,  
         language: 'zh-CN'  
	});
	$('#endtimepicker').datetimepicker({
		format: 'yyyy-mm-dd',
		autoclose: true,
	    todayBtn: true,
	    pickerPosition: "bottom-left",
        weekStart: 1,  
        autoclose: true,  
        startView: 2,  
        minView: 2,  
        forceParse: false,  
        language: 'zh-CN'  
	});
	
	
	$(".btn-default").click(function(){
		var start = $("#starttimepicker").val();
		var end = $("#endtimepicker").val();
		if(start == "" || end == ""){
			alert("时间不选择怎么查询？");
			return;
		}
		if(start > end){
			alert("哪有开始时间大于结束时间的！");
			return;
		}
		myChart.showLoading();
		$.post(ctx+"/user/loginlog/search",{
			start:start,
			end:end+" 23:59:59"
		},function(result){
			if(result.errorCode != 200){
	    		alert(result.moreInfo);
	    	}else{
	    		xdata = new Array();
	    		ydata = new Array();
	    		var results = result.data;
	    		for(var i = 0 ; i< results.length;i++){
	    			xdata.push(results[i].logintimeStr);
	    			ydata.push(results[i].count);
	    		}
	    		setData(xdata,ydata);
	    	}
	    	  
		});
	});
	
});

<c:if test="${(list) != null && fn:length(list) > 0}">
xdata = new Array();
ydata = new Array();
	<c:forEach items="${list}" var="a"> 
	xdata.push('${a.logintimeStr}');
	ydata.push('${a.count}');
	</c:forEach> 
	setData(xdata,ydata);
</c:if>

	// 填入数据
function setData(xdata,ydata){
	myChart.hideLoading();
    myChart.setOption({
        xAxis: {
            data: xdata
        },
        series: [{
            // 根据名字对应到相应的系列
            data: ydata
        }]
    });
}

</script>